<template>
  <div class="add-container" style="marginTop:20px">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="商品价格" prop="region">
        <el-input-number
          v-model="ruleForm.price"
          controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="商品描述" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-form-item label="封面图片" prop="fileList">
        <el-upload
          class="upload-demo"
          action="/api/upload"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="ruleForm.fileList"
          :on-success="success"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
            <!-- 富文本 -->
      <el-form-item label="内容" prop="richText">
        <quill-editor
          id="quill-editor"
          v-model="ruleForm.richText"
          @change="onEditorChange($event)"
        >
        </quill-editor>
      </el-form-item>
      <el-form-item label="提交">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即修改</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import QuillEditor from 'vue-quill-editor'
import { additem } from '_api'
import { Message, MessageBox } from 'element-ui'
export default {
  data () {
    return {
      ruleForm: {
        name: '',
        price: 0,
        desc: '',
        fileList: [],
        // 富文本
        richText: ''
      },
      rules: {
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        price: [{ required: true, message: '请选择价格', trigger: 'change' }],
        desc: [{ required: true, message: '请填写描述', trigger: 'blur' }],
        fileList: [{ required: true, message: '请上传图片', trigger: 'blur' }],
        richText: [{ required: true, message: '请填写具体内容', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 提交表单
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          additem(this.ruleForm).then((res) => {
            if (res.code === 200) {
              Message({
                message: '成功' || res.message,
                type: 'success',
                duration: 5 * 1000
              })
            }
          })
          console.log(this.ruleForm)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 上传成功的函数
    success (response) {
      this.ruleForm.fileList.push(response.data)
      console.log(this.ruleForm.fileList)
    },
    // 删除后替换新的filelist
    beforeRemove (a, newFile) {
      this.ruleForm.fileList = newFile
    },
    onEditorChange () {
      console.log(this.richText)
    },
    // 上传超出个数触发
    handleExceed () {
      Message({
        message: '不能在传啦o(╥﹏╥)o',
        type: 'success',
        duration: 5 * 1000,
        center: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .ql-editor{
  height: 320px;
}
</style>
